<template>
  <div id="home">
    <div class="msg" v-show="showMsg">您有一个账单未支付，请在7天内完成支付。<span @click="goUrl('company', 'bill')">点击查看</span></div>
    <div class="header">
      <div style="padding: 30px 30px 20px 30px;">
        <el-row class="base">
          <el-col :span="12">
            <div class="title">我的账单</div>
          </el-col>
          <el-col :span="12">
            <div class="link" @click="goUrl('company', 'bill')">查看</div>
          </el-col>
        </el-row>
        <el-row class="money">
          <el-col :span="12">
            <div class="mini">未支付（元）</div>
            <div>{{totalPay.unpaid}}</div>
          </el-col>
          <el-col :span="12">
            <div class="mini">累计支出（元）</div>
            <div>{{totalPay.paid}}</div>
          </el-col>
        </el-row>
        <!--<div class="line"></div>-->
        <div v-show="comData.certStatus=='02'"  style=" padding: 10px 0px 6px 0px;">
          <el-row class="com">
            <el-col :span="24">
              <div class="com_name">{{comData.enterpriseName}}</div>
            </el-col>
          </el-row>
          <el-row class="fy">
            <el-col :span="12">
              <div>法人代表：<span>{{comData.legalPsn}}</span></div>
            </el-col>
            <el-col :span="12">
              <div class="com_code">{{comData.taxpayerNum}}</div>
            </el-col>
          </el-row>
        </div>
        <div class="flex" style="margin-top: 25px; align-items: center;" v-show="comData.certStatus=='01' || comData.certStatus=='03'">
          <div style="display: inline-block; width: 40px; height: 40px;  "><img style="width: 100%; height: 100%;" src="./imgs/logo.png"></div>
          <div style="flex: 1; margin-left: 10px;"><span style="color: #FFFFFF; font-size: 12px;">使用优享车，选择您的心仪车辆，出行行驶更舒 服，企业形象更高大。</span></div>
        </div>
        <div style="clear: both;"></div>
      </div>


    </div>

    <div class="step_line" v-show="curStep==1">
      <div class="tab-line"><img src="./imgs/apply_icon.png"/>申请流程</div>
      <!--<el-steps :active="curStep" align-center>
        <el-step title="绑定企业"></el-step>
        <el-step title="选择商户"></el-step>
        <el-step title="签订租约"></el-step>
        <el-step title="签约成功"></el-step>
      </el-steps>-->
      <div class="step-list flex space-around">
        <div class="step-item">
          <div class="step-node" style="background-color: #1C67FF; box-shadow:0px 0px 0px 2px rgba(28,103,255,0.15); ">1</div>
          <div class="step-text">绑定企业</div>
        </div>
        <div class="step-line" style="border-top: 2px dashed #1C67FF;"></div>
        <div class="step-item">
          <div class="step-node">2</div>
          <div class="step-text">选择商户</div>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <div class="step-node">3</div>
          <div class="step-text">签订租约</div>
        </div>
        <div class="step-line"></div>
        <div class="step-item">
          <div class="step-node">4</div>
          <div class="step-text">签约成功</div>
        </div>
      </div>
    </div>

    <!--step1-->
    <div class="step_one task_lay block" v-if="curStep==1">
      <div class="tab-line" v-show="isBind!=1"><img src="./imgs/file_icon.png">所需资料</div>
      <el-form ref="comform" :rules="rules" :show-message="false" :model="comform" label-width="104" class="demo-form" label-position="right" v-show="isBind!=1">

        <div style="margin-bottom: 15px; font-size: 13px;">营业执照:</div>
        <div class="cardsviews">
          <div class="cardimgs">
            <div class="default_img" style="" v-show="comform.yyzzAttachId==''">
              <div class="circle_plus">
                <i class="heng"></i>
                <i class="shu"></i>
              </div>
            </div>
            <img v-show="comform.yyzzAttachId!=''" :src="comform.yyzzAttachUrl"/>
            <fileupload @uploadsucess="uploadsucess"></fileupload>
          </div>
          <div>
            <p style="color:rgba(153,153,153,1); font-size: 12px;">最大支持6MB,支持jpg/gif/png格式；图片需要清晰：注册号/企业名称/法人代表/年检章等需清
              晰可辨。</p>
          </div>
        </div>

        <el-form-item label="企业名称:" prop="name">
          <el-input placeholder="请输入企业名称" v-model="comform.enterpriseName"></el-input>
        </el-form-item>

        <el-form-item label="纳税人识别号:" prop="name">
          <el-input placeholder="请输入纳税人识别号" v-model="comform.taxpayerNum"></el-input>
        </el-form-item>

        <el-form-item label="法定代表人:" prop="name">
          <el-input placeholder="请输入企业法定代表人姓名" v-model="comform.legalPsn"></el-input>
        </el-form-item>

        <el-form-item label="法人身份证号:" prop="name">
          <el-input placeholder="请输入法人身份证号" v-model="comform.legalIdNumber"></el-input>
        </el-form-item>

        <div class="submit" @click="submitData">提交</div>

      </el-form>

      <div class="" v-show="isBind==1">
        <div class="infos is_wait" v-show="comData.certStatus=='01'">
          <p>您的绑定信息已提交，预计将在2个工作日内完成审核 请您耐心等待。 感谢您对优享车平台的支持！</p>
        </div>
        <div class="is_refuse" v-show="comData.certStatus=='03'" style="padding: 10px 0px;">
          <div class="is_refuse_icon">!</div>
          <p style="color: #FF5D32; font-size: 14px;">企业信息审核未通过</p>
          <p style="color: #999999; font-size: 12px;">原因：{{approveDesc}}</p>
          <div class="repush_btn" @click="isBind=0">重新提交</div>
        </div>
      </div>

    </div>

    <!--车辆搜索框-->
    <div class="search flex space-between" v-show="curStep>1">
      <input class="search_input" v-model="keyword" placeholder="搜索商户名称/车牌号/经营者"/>
      <div class="search_btn" @click="searchCar"><i class="el-icon-search"></i></div>
    </div>
    <!--车辆搜索框-->

    <!--step2-->
    <div class="step_two" v-if="curStep==2">


      <div class="search_res">
        <!--<h3 style="font-size: 16px;">推荐</h3>-->
        <div class="res_list" v-show="keyword!=''">
          <div class="car-item block" v-for="(item, index) in carList" :key="index" v-show="carList.length>0">
            <div class="tab-line"><img src="./imgs/person_icon.png"/>商户信息</div>
            <div class="input_icon">
              <i v-show="item.id != selectedCar.id"  @click="selecteCar(item)" class="null_icon"></i>
              <i v-show="item.id == selectedCar.id" @click="selecteCar(item)" class="input_select_icon el-icon-success"></i>
            </div>
            <div class="detail">
              <!--<p><span>商户名称：</span>江海区云商湘170号商品信息咨询部</p>-->
              <p><span>车主姓名</span>{{item.ownerName}}</p>
              <p><span>车牌号</span>{{item.carNumber}}</p>
              <p><span>月租金</span>{{item.monthAmount}}元</p>
              <p><span>结算周期</span>{{item.cycle | convertWord}}度</p>
              <p><span>服务费</span>{{item.serviceFeeAmount}}元</p>
            </div>
          </div>
          <!--<div class="car-item block">
            <div class="tab-line"><img src="./imgs/person_icon.png"/>商户信息</div>
            <div class="input_icon"><i v-show="sel_icon" @click="sel_icon=!sel_icon" class="null_icon"></i> <i
              v-show="!sel_icon" @click="sel_icon=!sel_icon" class="input_select_icon el-icon-success"></i></div>
            <div class="detail">
              &lt;!&ndash;<p><span>商户名称：</span>江海区云商湘170号商品信息咨询部</p>&ndash;&gt;
              <p><span>车主姓名</span>王小华</p>
              <p><span>车牌号</span>京A33333</p>
              <p><span>月租金</span>10000元</p>
              <p><span>结算周期</span>月度</p>
              <p><span>服务费</span>500元</p>
            </div>
          </div>-->
          <div class="no_car_res" style="color: #999999; font-size: 12px; margin: 15px 0px;" v-show="keyword!='' && carList.length<1">
            暂无可推荐的车辆，可能是搜索的车辆未审核通过，或者是 车辆所有人未完成工商户登记。请耐心等待。
          </div>
        </div>



        <div class="submit" :class="{'gray-back-color': !selectedCar.id}" :disable="!selectedCar.id" style="width: 80%; margin: 0 auto; margin-top: 20px;" @click="orderSave" v-show="keyword!='' && carList.length>0">选择商户</div>

      </div>
    </div>
    <!--step2-->

    <!--step3-->
    <div class="step_three" v-show="orderList.length>0 && keyword==''"><!--v-if="curStep==3 || curStep==4"-->
      <div class="com_info block" v-for="(item, index) in orderList" :key="index" @click="goUrl('company', 'bill')">
        <h3 class="flex space-between" style="font-size: 16px;align-items: center;"><div class="tab-line"><img src="./imgs/person_icon.png"/>商户信息</div>
          <div class="mer_status" v-show="item.contractStatus=='01' && item.orderStatus==null">商户确认中</div>
          <div class="mer_status mer_status_unsign" v-show="item.contractStatus=='01' && item.orderStatus=='01'">商户未确认</div>
          <!--<div v-show="item.contractStatus=='02' && item.orderPayStatus=='02'" class="mer_status mer_status_pay">支付成功</div>-->
          <div v-show="item.contractStatus=='02' && item.orderStatus=='02'" class="mer_status mer_status_pay">签约成功</div>
          <!--<div v-show="item.contractStatus=='03'" class="mer_status mer_status_fail">签约失败</div></h3>-->
          <div v-show="item.orderStatus=='03'" class="mer_status mer_status_fail">已结束</div>
          <div v-show="item.orderPayStatus=='01' && item.contractStatus=='02'  && item.orderStatus=='01'" class="mer_status mer_status_fail">已过期</div></h3>

        <div class="detail">
          <!--<p><span>商户名称：</span>江海区云商湘170号商品信息咨询部</p>-->
          <!--<p><span>纳税人识别号：</span>98848892949278849</p>-->
          <p><span>车主姓名：</span>{{item.ownerName}}</p>
          <p><span>车牌号：</span>{{item.carNumber}}</p>
          <p><span>月租金：</span>{{item.monthAmount}}元</p>
          <p><span>结算周期：</span>{{item.cycle | convertWord}}度</p>
          <p><span>服务费：</span>{{item.serviceFee}}元</p>
          <p v-if="item.leaseStartDate"><span>租赁时间：</span>{{item.leaseStartDate | getFormateDate('y.m.d')}}至{{item.leaseEndDate | getFormateDate('y.m.d')}}</p>
        </div>
      </div>
      <!--<div class="com_info block">
        <h3 class="flex space-between" style="font-size: 16px;align-items: center;">商户信息<div class="mer_status" v-show="agree">商户确认中</div><div v-show="!agree" class="mer_status mer_status_pay">支付成功</div><div v-show="!agree" class="mer_status mer_status_wait">商户未确认</div><div v-show="!agree" class="mer_status mer_status_fail">签约失败</div></h3>
        <div class="detail">
          &lt;!&ndash;<p><span>商户名称：</span>江海区云商湘170号商品信息咨询部</p>&ndash;&gt;
          &lt;!&ndash;<p><span>纳税人识别号：</span>98848892949278849</p>&ndash;&gt;
          <p><span>车主姓名：</span>王小华</p>
          <p><span>车牌号：</span>京A111111</p>
          <p><span>月租金：</span>10000元</p>
          <p><span>结算周期：</span>月度</p>
          <p><span>服务费：</span>500元</p>
        </div>
      </div>-->
      <!--<div class="rent_info" style="padding-top: 10px;">
        <h3 style="font-size: 16px;">租赁信息<div class="rent_type">租赁类型：车辆</div></h3>
        <div class="detail">
          <p><span>车辆信息：</span>迈巴赫</p>
          <p><span>车牌号：</span>京A111111</p>
          <p><span>月租金：</span>10000元</p>
          <p><span>结算周期：</span>月度</p>
          <p><span>服务费：</span>500元</p>
        </div>
      </div>-->
      <!--<div class="agreement">
        <el-checkbox v-model="agree">阅读并同意</el-checkbox>
        <span style="font-size: 13px; color: #1C67FF;">《三方租赁协议》</span></div>
      <div class="btn-group flex space-between">
        <div class="base_btn reset_btn">重新选择</div>
        <div class="base_btn sure_btn" :class="{'defult_btn':!agree}" @click="nextStep">选择商户</div>
      </div>
      <div v-show="!agree" class="submit">重新搜索</div>-->
    </div>
    <!--step3-->

    <mnav cur="2"></mnav>
  </div>
</template>

<script>
  import {OSS_API_HOST} from '@/constants'
  export default {
    name: 'company-home',
    data () {
      return {
        showMsg: false,
        curStep: 0,
        sel_icon: false,
        agree: false, //第三步骤的是否同意协议
        isBind: 0, //是否已绑定企业
        comData: {certStatus: '01'}, //企业信息
        keyword: '',  //搜索关键字
        carList: [],  //检索出的车辆
        orderList: [],  //订单列表
        selectedCar: {}, //当前选中的车
        yyzzAttachId: '', //附件id
        yyzzAttachUrl: '', //附件地址
        approveDesc: '营业执照不清晰',
        comform: {
          enterpriseName: '',
          taxpayerNum: '',
          legalPsn: '',
          yyzzAttachId: '',
          legalIdNumber: '',

        },
        totalPay:{
          paid:'-',
          unpaid:'-',
        },
        rules: {
          /*enterpriseName: [
            {required: true, message: '请输入企业名称', trigger: 'blur'},
            {min: 3, max: 5, message: '请输入正确的企业名称', trigger: 'blur'}
          ]*/
        },


      }
    },
    created () {
      this.curStep = parseInt(this.$route.query.step?this.$route.query.step:0)
      this.getTotalPay();
    },
    mounted() {
      this.queryList();
      this.getWaitPayOrder();

    },
    methods: {
      //提交表单
      submitData(){
        if(this.comform.enterpriseName == '') {
          this.$toast('请输入企业名称！');
          return false;
        }
        if(this.comform.taxpayerNum == '') {
          this.$toast('请输入纳税人识别号！');
          return false;
        }
        if(this.comform.legalPsn == '') {
          this.$toast('请输入法定代表人！');
          return false;
        }
        if(this.comform.yyzzAttachId == '') {
          this.$toast('请上传正确的营业执照')
          return false;
        }
        if(this.comform.legalIdNumber == '') {
          this.$toast('请填写法人身份证号')
          return false;
        }
        this.$http.post('yxc/enterprise/save',this.comform).then(res=>{
          if(res.code == 200) {
            this.$toast('信息提交成功!')
            this.curStep = 1;
            this.queryList();
          }
        })
      },
      uploadsucess(img){
        if(img.code == 200) {
          this.yyzzAttachId = img.data;

          this.$http.get('yxc/enterprise/discern?attId='+this.yyzzAttachId).then(res=>{
            if(res.code == 200) {
              let remand = JSON.parse(res.data)
              this.comform.enterpriseName = remand.name
              this.comform.taxpayerNum = remand.reg_num
              this.comform.legalPsn = remand.person
              this.comform.yyzzAttachId  = this.yyzzAttachId;
              this.comform.yyzzAttachUrl = OSS_API_HOST + 'oss/file/' + this.comform.yyzzAttachId;
            } else {
              this.$toast('请上传正确的营业执照')
            }

          })
        } else {
          this.$toast(img.message)
        }

      },
      //查询车辆
      searchCar() {
        this.selectedCar = {};
        if(!this.keyword) {
          this.$toast('请输入搜索内容')
          return false;
        }
        this.$http.get('yxc/car/queryCarList',{
          params:{
            keyword: this.keyword
          }
        }).then(res=>{
          this.carList = res.data;
        })
      },
      //选择车辆
      selecteCar(car) {
        if(this.selectedCar.id == car.id) {
          this.selectedCar = {};
        } else {
          this.selectedCar = car;
        }
      },
      //获取进行中的订单
      getRuningOrder() {
        this.orderList = [];
        this.$http.post('yxc/order/queryList',{contractStatus : '01'}).then(res => {
          if(res.code == 200) {
            //this.orderList = res.data;
            this.orderList.push(...res.data)
          }

        })
        this.$http.post('yxc/order/queryList',{contractStatus : '02'}).then(res => {
          if(res.code == 200) {
            this.orderList.push(...res.data)
          }

        })
      },
      //提交订单
      orderSave() {
        if(JSON.stringify(this.selectedCar) == "{}") {
          return false;
        }
        /*//添加订单钱前端还得查一下用户所属的商户id ^_^
        this.$http.get('yxc/merchant/viewMerByWxUserId?wxUserId=' + this.selectedCar.wxUserId,{}).then(res=>{

        })
        return false;*/
        var data = {
          carId: this.selectedCar.id,
          enterpriseId: this.comData.id,
//          merchantId: 1,
        }
        this.$http.post('yxc/order/save',data).then(res=>{
          if(res.code == 200) {
            this.keyword = '';  //下单后关闭车辆列表显示订单列表
            this.getRuningOrder();
            this.curStep = 2;
          } else {
            this.$toast(res.message)
          }
        })
      },
      nextStep() {
        if(this.curStep++ > 3) {
          this.curStep=1;
        }
      },
      goUrl(path, funCode) {
        this.$router.push({
          path: '/'+path,
          query:{
            funCode: funCode
          }
        })
      },
      queryList() {
        this.$http.post('yxc/enterprise/queryList',{}).then(res=>{
          if(res.code == 200) {

            if(res.data.length>0) {
              //this.isBind = true;
              //this.curStep = 2;
              this.isBind = 1;
              this.comData = res.data[0];
              localStorage.setItem('company', JSON.stringify(this.comData)) //保存企业信息
              if(this.comData.certStatus == '01' || this.comData.certStatus == '03') {
                this.curStep = 1;
                this.comform = Object.assign({}, res.data[0])
                this.comform.yyzzAttachUrl = OSS_API_HOST + 'oss/file/' + this.comform.yyzzAttachId;
                if(this.comData.certStatus == '03') {
                  this.queryAuditList(this.comData.id);
                }
              }
              if(this.comData.certStatus == '02') {
                this.getRuningOrder();
                this.curStep = 2;
              }
            } else {
              this.curStep = 1;
            }

          }
        })

      },
      //查询企业审核状态及信息
      queryAuditList(enterpriseId){
        this.$http.post('yxc/enterprise/queryAuditList',{
          enterpriseId: enterpriseId
        }).then(res=>{
          if(res.code == 200) {
            this.approveDesc = res.data[0].approveDesc
          }
        })
      },
      //查询待支付的订单
      getWaitPayOrder(){
        this.$http.post('yxc/order/queryList',{orderStatus: '02', orderPayStatus: '01'}).then(res => {
          if(res.code = 200) {
            let len = res.data.length;
            if(len>0) {
              this.showMsg = true;
            } else {
              this.showMsg = false;
            }
          }
        })
      },
      //获取账单统计
      getTotalPay() {
        this.$http.get('yxc/orderExpendPay/getTotalPay').then(res=>{
          if(res.code == 200) {
            this.totalPay = res.data;
          }

        })
      }
    },
    filters:{
      //转换年季月
      convertWord: function(val) {
        if(val == 'M') return '月';
        if(val == 'Q') return '季';
        if(val == 'Y') return '年';
      }
    },
    /*watch:{
      yyzzAttachId: function (oldVal, newVal) {
        this.yyzzAttachUrl = OSS_API_HOST + 'oss/file/' + this.yyzzAttachId;
      }
    }*/

  }
</script>

<style lang="scss" scoped>
  #home {
    margin: 0 10px;
    margin-bottom: 80px;
  }

  h3 {
    margin: 0px 0px;
  }

  .msg {
    margin-top: 5px;
    padding: 10px 5px;
    background: rgba(255, 238, 233, 1);
    border-radius: 5px;
    color: #FF5D32;
    margin-bottom: 10px;
    font-size: 12px;
  span {
    color: #333;
    text-decoration: underline;
    /*border-bottom: 1px solid #333;*/
  }

  }
  .header {
    background-image: url("../../assets/img/home_back.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: -10px -14px;
    /*background-color: #1C67FF;*/
    /*background: rgba(28, 103, 255, 1);*/
    border-radius: 10px;
    /*padding: 10px 30px;*/
    /*height: 195px;*/

  .base {
    color: #fff;
    height: 25px;
    line-height: 25px;
    /*padding: 10px 0px;*/
    margin-bottom: 10px;

  .title {
    font-size: 15px;
    font-weight: bold;
  }

  .link {
    /*background: #0050f1;*/
    /*border: 1px solid #89BEFF;*/
    border-radius: 15px 0px 0px 15px;
    font-size: 12px;
    padding: 0 5px;
    width: 50px;
    text-align: center;
    float: right;
    background-color: #47ABFF;
    margin-right: -14px;
  }

  }
  .money {
    color: #fff;

  /*padding: 5px 0px;*/
  .mini {
    font-size: 12px;
    color: #C5E2FF;
  }

  }
  .line {
    padding: 5px 30px;
    border-bottom: 1px solid #6497FF;
  }

  .fy {
    height: 26px;
    line-height: 26px;
    color: #D2E8FF;
    font-size: 11px;

  span {
    font-size: 11px;
  }

  .com_code {
    color: #D2E8FF;
  }

  }
  .com {
    color: #ffffff;
    font-size: 12px;
    padding: 5px 0px;
    padding-bottom: 5px;
  }

  }

  /*操作步骤*/
  .step_line {
    margin: 10px auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
  }

  .submit {
    background: rgba(28, 103, 255, 1);
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    margin: 20px 10px;
  }

  .flex {
    display: flex;
  }

  .space-around {
    justify-content: space-around;
  }

  .space-between {
    justify-content: space-between;
  }

  /*上传营业执照*/
  .cardsviews {
    margin: 0 30px;
    position: relative;

  .cardimgs {
    position: relative;
    overflow: hidden;

  img {
    width: 100%;
  }

  }
  .tipinfo {
    text-align: center;
    color: #040404;
  }

  }
  .block {
    margin: 10px auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px 15px;

  .infos {
    font-size: 12px;
    color: #333;
  }

  }
  .step_one {

    .is_refuse {
      text-align: center;

      .is_refuse_icon {
        margin: 0 auto;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background-color: #FF7F5D;
        color: #fff;
        border-radius: 50%;
        font-size: 24px;
      }

      .repush_btn {
        width: 150px;
        height: 44px;
        line-height: 44px;
        margin: 0 auto;
        background-color: #1C67FF;
        border-radius: 5px;
        color: #fff;
      }

    }
    .default_img{
      background-color: #EFF8FF; height: 150px; display: block;
      position: relative;
      border-radius:10px;
      .circle_plus{
        position: absolute;
        width: 50px;height: 50px;background:rgba(189,226,255,0.5);;
        margin:0 auto;
        border-radius: 50%;
        top: 50px;
        left: calc( 50% - 25px);
        .shu{height: 30px; width: 5px; background-color: #fff; position: absolute; left: 22px;top: 10px; border-radius: 3px;}
        .heng{height: 5px; width: 30px; background-color: #fff; position: absolute; left: 10px;top: 22px; border-radius: 3px;}
      }
    }
  }

  .search {
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    background: #fff;
    padding-left: 10px;
    margin: 10px 0px;

  input {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border: none;
    outline: none;
    width: 85%;
  }

  .search_btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #1C67FF;
    border-radius: 5px;
    margin-right: 5px;
  }

  i {
    color: #fff;
  }

  }

  .step_two {
    margin: 10px auto;
    .search_res{
      margin: 15px 0px;
    }

  .car-item {
  position: relative;
  .input_icon{
    position: absolute;
    right: 15px;
    top: 22px;
  }
  .input_icon .null_icon {
    /*margin-top: 20px;*/
    width: 15px;
    display: block;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #B5B5B5;
  }

  .input_select_icon {
    /*margin-top: 20px;*/
    font-size: 18px;
    color: #1C67FF;
  }

  p {
    color: #333;
  }

  p span {
    color: #999999;
  }

  }
  }
  .step_three {
    .mer_status{
      display: inline-block; float: right; color:#1C67FF; background-color: #E8F0FF; border-radius: 5px;padding: 0 10px; height: 28px; line-height: 28px; text-align: center; font-size: 12px;font-weight: normal;
    }
    .rent_type{display: inline-block; float: right; color:#999; font-size: 12px;font-weight: normal;}
    .mer_status_wait{color:#FF5D32; background-color: #FFEEE9;}
    .mer_status_fail{color:#F79100; background-color: #FFF1DC;}
    .mer_status_unsign{color:#FF5D32; background-color: #FFEEE9;}
    .mer_status_pay{background-color: #F2F2F2; color: #666;}
    .btn-group{
      margin: 0 auto;
      text-align: center;
      .reset_btn{background-color: #fff; border: 1px solid #B5B5B5; color:#999; }
      .sure_btn{background: rgba(28, 103, 255, 1); color: #fff; padding: 0px 50px;}
      .defult_btn{background-color: #E5E5E5;}
    }
  }
  .tab-line{font-size: 16px; color: #333; font-weight: 800; margin: 10px 0px;}
  .tab-line img{display: inline; height: 15px; width: 14px; margin-right: 5px;position: relative; top:2px;}

  .detail{font-size:13px;}
  .detail p{color: #333; display: flex; justify-content: space-between; align-items: center;}
  .detail p span{color: #999999;}

  .base_btn{display: inline-block; padding: 0px 20px;border-radius: 5px; height: 44px; line-height: 44px;text-align: center; margin: 20px 10px;}
  .gray-back-color{background-color: #E5E5E5;}

  /*步骤*/
  .step-list{font-size: 12px; text-align: center; color: #666666;}
  .step-list .step-node{width: 19px; height: 19px; background: #D2D2D2; border-radius: 50%; margin: 0 auto; line-height: 19px; color: #ffffff; box-shadow: 0px 0px 0px  2px rgba(210,210,210,.2);border: 1px solid #ffffff;}
  .step-list .step-text{margin-top: 10px;}
  .step-list .step-line{border-top: 2px dashed #E5E5E5;margin-top: 11px; width: 30px;}
</style>
<style>
  .el-step__icon-inner {
    font-weight: normal;
  }

  .el-step__icon{
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  /*未开始*/
  .el-step__head.is-wait {
    color: #fff;
  }
  .el-input__inner{background-color: #F9FBFD;}
  .el-step__head.is-wait > .el-step__icon {
    background-color: #DCDCDC;
    border: none;
    font-weight: normal;
  }
  .el-step__title{
    font-size: 12px;
  }

  .el-step__title.is-wait {
    color: #000;
  }

  /*进行中*/
  .el-step__head.is-process {
    color: #fff;
  }

  .el-step__head.is-process > .el-step__icon {
    background-color: #DCDCDC;
    border: none;
    font-weight: normal;
  }

  .el-step__title.is-process {
    color: #000;
    font-weight: normal;
  }

  /*已完成*/
  .el-step__head.is-finish {
    color: #fff;
  }

  .el-step__head.is-finish > .el-step__icon {
    background-color: #00CDB6;
    border: none;
    font-weight: normal;
  }

  .el-step__title.is-finish {
    color: #000;
    font-weight: normal;
  }

  /*表单*/
  /*.el-form-item__label{text-align: left;}*/
  .el-form-item__label {
    color: #000;
    font-size: 13px;
  }
  .el-step.is-horizontal .el-step__line{
    height: 0px;
    border-bottom: 1px dashed #C9C9C9;
  }
</style>
